<template>

  <view class="page content">
    <!-- 搜索栏 -->
    <view class="top" :style="{ height: (selectId == 0 || selectId == 3) ? '300rpx' : '440rpx', }">
      <view class="top_search_box flex"
        :style="{ height: searchHeight ? searchHeight + 'px' : '180rpx', paddingTop: top + 'px' }">
        <view class="ft1 mr-20">产品</view>
        <view class="search flex-center" @click="goPage('/subpackage/search/search')">
          <up-input placeholder="请输入关键词搜索" placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" readonly
            prefixIcon="search" prefixIconStyle="font-size: 32px;color: #333333;font-weight: bold;"></up-input>
        </view>
      </view>
      <!--tab栏  -->
      <view class="tabBar flex-bwt mt-30">
        <view class="item ft c-66 flex-center" :class="{ active: selectId == index }" v-for="(item, index) in tableList"
          :key="index" @click="selectBtn(index)">{{ item.name }}
        </view>
      </view>
      <!-- 筛选模块 -->
      <view class="menu_box mt-20" v-if="selectId !== 0 && selectId !== 3">
        <view class="bg" v-if="showBg"></view>
        <view class="menu_box_list">
          <view class="tabTwo auto flex-bwt mt-24">
            <view class="left flex ml-24">
              <view class="item ft flex" v-for="(item, index) in tab2Array" :key="item">
                <view class="flex" @click="openShow(item, item.title)">
                  <text class="mr-4 c-66" :class="{ active: item.active }">{{
                    item.title
                  }}</text>
                  <image class="jiantou" :class="currentIndex == index ? 'imgdeg' : ''"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png"></image>

                </view>

                <text class="line" v-if="index < tab2Array.length - 1"
                  style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 20rpx;margin-right: 20rpx;"></text>
              </view>
            </view>
            <view class="right flex mr-24" @click="openShow">
              <text class="ft mr-8" :class="isFilter ? 'active' : ''">筛选</text>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon16.png"></image>
            </view>
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
          <view class="scroll-view-item_A ft flex-center" v-for="(item, index) in tipList" :key="index"
            :class="filterList[item.key].names?.includes(item.name) ? 'scroll-view-item_A_active' : filterList[item.key].names?.includes(item) ? 'scroll-view-item_A_active' : ''"
            @click="selectActivity(item)">
            {{ item.name }}
          </view>
        </scroll-view>
      </view>
    </view>
    <view :style="{ height: (selectId == 0 || selectId == 3) ? '300rpx' : '440rpx', width: 100 + '%' }"></view>

    <!-- 内容区域 -->
    <!-- 推荐 -->
    <view class="box100" v-if="selectId == 0">
      <view class="imgBox">
        <up-swiper height="220rpx" :radius="16" v-if="list1.length > 0" :list="list1" keyName="img" circular
          @click="getAdList"></up-swiper>
      </view>
      <view class="teacher pd-20 mt-30">
        <view class="title ft1">
          <view class="ft1 title_text">专业老师</view>
          <view class="ft-eng title_bg">Teacher consultation</view>
        </view>
        <scroll-view class="scroll-view mt-16" scroll-x="true" @scroll="scroll" scroll-left="0">
          <view class="consultant mr-20 pd-20" v-for="item in SaleList" :key="item.id" @click="goPage('')">
            <view class="title flex">
              <view class="avtor flex-center fs0">
                <image class="wh-72" style="border-radius: 50%" :src="item.avatar" mode="aspectFill"></image>
              </view>
              <view class="desc te-wid">
                <view class="ft ft-20 c-99 te-1">
                  <span v-for="(type, idx) in item.product_type_arr.slice(0, 2)" :key="type">
                    {{ (idx < item.product_type_arr.length - 1) ? type + " | " : type }} </span>
                </view>
                <view class="ft1 mt-12 te-1">{{ item.nickname_show }}</view>
              </view>
            </view>
            <view class="flex-bwt mt-14">
              <text class="ft c-99"><text style="color: #333333; font-size: 20rpx">{{
                item.consult_num
                  }}人</text>
                <text
                  style="display: inline-block;width: 2rpx;height: 20rpx;background: #F1F1F1; margin: 0 10rpx;"></text>
                {{ "咨询过" }}
              </text>
              <view class="ml-20 detail pd-10 flex-center ft c-33"
                @click="goPage('/subpackage/teacher/teacherDetail?id=' + item.id)">{{
                  "预约咨询"
                }}</view>
            </view>
          </view>
        </scroll-view>
        <view class="btn flex-center" @click="goPage('/subpackage/teacher/teacher')">
          <text class="ft mr-10">查看更多</text>
          <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
        </view>
      </view>
      <view class="ranking_box">
        <view class="ranking">
          <view class="head pd-10">
            <view class="title flex-bwt">
              <view class="left flex">
                <view class="title_name ft1 wen">排行榜</view>
                <view class="title_bg ft-eng c-ff">Rankings</view>
              </view>
              <view class="right ft c-66 mr-4">
                {{ "更新 " + DataUtils.nowDateFun() }}
              </view>
            </view>
            <view class="tab flex-eve">
              <view :class="{ active: selectNum === item.id }" @click="selectTab(item.id)"
                class="tabItem ft flex-center" v-for="item in list" :key="item.id">
                <image class="imag" v-if="selectNum === item.id"
                  src="https://cdn.oss.bon-top.cn/static_bc/images/ranking_bg.png" mode="scaleToFit" />
                <span class="tabItem_text"> {{ item.name }}</span>
              </view>
            </view>
          </view>
          <view class="card_box">

            <view class="cardList">
              <view class="card mt-20 pd-10" v-for="(item, index) in productList" :key="item.id"
                @click="goPage('/subpackage/immigration/immigration?id=' + item.id)">
                <view class="flex">
                  <view class="pic">
                    <image v-if="index === 0" class="w-42h-48 img"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/num_1.png"></image>
                    <image v-if="index === 1" class="w-42h-48 img"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/num_2.png"></image>
                    <image v-if="index === 2" class="w-42h-48 img"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/num_3.png"></image>
                    <image class="wh-100 bd-r20" :src="item.cover" mode="aspectFill"></image>
                  </view>
                  <view class="desc ml-12 te-wid">
                    <view class="ft1 te-1">{{ item.name }}</view>
                    <view class="kid mt-10"><text class="ft">{{ item.currency_symbol }}</text><text
                        class="ft-num ft-28">{{
                          item.bc_price_show
                        }}</text><text class="ft">{{ item.bc_price_unit }}</text>
                    </view>
                  </view>
                </view>
                <view class="location mt-12 flex-bwt">
                  <view class="flex ml-12">
                    <image class="wh-24 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"></image>
                    <text class="ft-20 c-33">{{ item.country_info.name }}</text>
                  </view>
                  <view class="mr-12 flex">
                    <text class="ft-20 c-33">{{ item.consult_num }}</text>
                    <text
                      style="display: inline-block;width: 2rpx;height: 20rpx;background: #999999;margin: 0 10rpx;"></text>
                    <text class="ft-20 c-99">{{ "咨询过" }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="btn flex-center" @click="goPage('/subpackage/immigration/rankings?index=' + selectNum)">
              <text class="ft mr-10">查看更多</text>
              <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="twoCard flex-bwt pd-30">
        <view class="card_1 pd-20">
          <view class="title ft1">
            <view class="title_box">
              <view class="ft1 title_name">精品服务</view>
              <view class="ft-eng title_bg">Quality service</view>
            </view>
            <view class="mt-20 card_slo">

              <swiper class="swiper" circular :indicator-dots="false" :autoplay="autoplay" :interval="interval"
                :duration="duration" @change="changeSwiper">
                <swiper-item v-for="item in productJPList" :key="item">
                  <view class="item">
                    <view class="item_model bd-r40">
                      <view class="flex pd-10">
                        <image class="imgs bd-r20" :src="item.cover" mode="aspectFill">
                        </image>

                        <view class="contents ml-10 te-wid">
                          <view class="te-1 ft-28 c-33 fw-800">{{ item.name }}</view>
                          <view class="money flex mt-8 bd-r20">
                            <view class="ft-20">{{ item.currency_symbol }}<span class="ft-num ft-28">{{
                              item.bc_price_show
                                }}</span>{{ item.bc_price_unit }} <span style="color: #F1F1F1 ;"></span>
                            </view>
                          </view>

                        </view>
                      </view>
                      <view class="flex-bwt address pd-10">
                        <view class="flex">
                          <image class="imgs_icon bd-r40" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"
                            mode="aspectFill"> </image>
                          <span class="ft-20 c-33">{{ item.country_info?.name }}</span>
                        </view>
                        <view class="c-99 ft-20">
                          <!-- <span v-for="i in item.tags" :key="i">{{ i.name+'|' }}</span> -->
                          {{ '服务周到 | 一对一' }}
                        </view>
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
              <view class="indicator">
                <view class="dian" v-for="(item, index) in productJPList" :key="index"
                  :class="index == SwpercurrentIndex ? 'active' : ''"></view>
              </view>

            </view>
            <view class="all mt-30 flex-center" @click="goPage('/subpackage/immigration/boutiqueList')">
              <text class="ft">全部</text>
              <image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
            </view>
          </view>

        </view>
        <view class="card_2 pd-20">
          <view class="title ft1">
            <view class="ft1 wen">标签搜产品</view>
            <view class="ft-eng wen_bg">Label products</view>
          </view>
          <view class="card_2_tag mt-10">

            <view class="flex-center ft ft-20 c-99">项目产品 | 名词科普 | 产品推荐</view>
            <view class="mt-16 tipList flex-center ft fw-800 c-33" v-for="(item, index) in productTagLis.slice(0, 3)"
              :key="index" @click="goPage('/subpackage/clinch/tipSearch?tigId=' + item.id)">{{ '#' + item.name }}</view>

            <view class="all flex-center" @click="goPage('/subpackage/clinch/tipSearchDetail')">
              <text class="ft">全部</text>
              <image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
            </view>
          </view>

        </view>
      </view>
      <view class="nextCard mt-30">

        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
          <view class="scroll-view-item_A ft flex-center" v-for="(item, index) in tipList" :key="index"
            :class="filterList[item.key].names?.includes(item.name) ? 'scroll-view-item_A_active' : filterList[item.key].names?.includes(item) ? 'scroll-view-item_A_active' : ''"
            @click="selectActivity(item)">
            {{ item.name }}
          </view>
        </scroll-view>

        <view class="pd-20">
          <ComProjectList class="mt-10" v-if="Object.keys(dataList).length > 0" :dataList="dataList"
            :dataObj="dataListObj" :pageInfo="pageInfo" @getProjectList="getProductListFun">
          </ComProjectList>
        </view>

      </view>
      <view style="height: 200rpx"></view>
    </view>
    <!-- 移民 -->
    <view class="box100" v-if="selectId == 1 || selectId == 2">
      <!-- <view class="flex-eve" v-if="selectId === 1">
        <view class="imglist">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/ca_1.png"></image>
        </view>
        <view class="imglist">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/ca_2.png"></image>
        </view>
        <view class="imglist">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/ca_3.png"></image>
        </view>
      </view> -->
      <view class="nextCard mt-20">

        <!-- 展示类型 -->
        <view class="qiehuan pd-10 flex ml-20 mt-20" @click="changeShowList()">
          <text class="ft c-33 mr-8">{{ showListTitle }}</text>
          <image class="wh-28" v-if="!isShowList" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_mo.png"></image>
          <image class="wh-28" v-else src="https://cdn.oss.bon-top.cn/static_bc/images/video_icon.png"></image>
        </view>

        <!-- 列表 -->

        <view class="pd-20">
          <ComProjectList v-if="dataList.length > 0 && isShowList" :dataList="dataList" :dataObj="dataListObj"
            :pageInfo="pageInfo" @getProjectList="getProductListFun">
          </ComProjectList>
        </view>

        <!-- 视频 -->
        <comVedioList v-if="dataList.length > 0 && !isShowList" :dataList="dataList" :dataObj="dataListObj"
          :pageInfo="pageInfo" @getVideoList="getProductListFun"></comVedioList>
        <view style="height: 100px;"></view>
      </view>

    </view>

    <!-- 收藏 -->
    <view class="box100" v-if="selectId == 3">
      <view class="nextCard">
        <view style="width: 100%;">
          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
            <view class="scroll-view-item_A ft flex-center"
              :class="collectIndex == item.id ? 'scroll-view-item_A_active' : ''" v-for="(item, index) in tipListSC"
              :key="index" @click="collectFun(item)">
              {{ item.name }}
            </view>
          </scroll-view>
        </view>
        <!-- 展示类型 -->
        <view class="qiehuan pd-10 flex ml-20 mt-20" @click="changeShowList()">
          <text class="ft c-33 mr-8">{{ showListTitle }}</text>
          <image class="wh-28" v-if="!isShowList" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_mo.png"></image>
          <image class="wh-28" v-else src="https://cdn.oss.bon-top.cn/static_bc/images/video_icon.png"></image>
        </view>
        <!-- 列表 -->
        <comLoadMord v-if="Object.keys(dataListObj).length > 0" :dataList='dataListObj' :pageInfo='pageInfo'
          ref="LoadMordView" @getDatas="getProductListFun">
          <template v-if="isShowList && Object.keys(dataList).length > 0">
            <view class="cardList_box flex" v-for="item in dataList" :key="item.id">
              <view class="cardList_box_item" :style="{ transform: `translateX(${item.offsetX}px)` }"
                @touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
                <view class="cardList auto flex fs0">
                  <view class="checkBox mr-8 ml-10" v-if="isEdit">
                    <view class="yuan" @click="changCheckd(item)">
                      <image class="icons" v-if="item.click"
                        :src="`https://cdn.oss.bon-top.cn/static_bc/images/check.png`" mode="aspectFill">
                      </image>
                      <view class="bd-r50c noCheckd" v-else></view>
                    </view>
                  </view>
                  <view class="card auto pd-12" @click="goPage('/subpackage/immigration/immigration?id=' + item.id)">
                    <view class="absu" v-if="item.is_sellout == 1">
                      <image class="iamg" src="https://cdn.oss.bon-top.cn/static_bc/images/slodOut.png"></image>
                    </view>
                    <view class="flex">
                      <view class="left" style="flex-shrink: 0;">
                        <image class="wh-100 bd-r40" :src="item.cover" mode="aspectFill">
                        </image>
                      </view>
                      <view class="right ml-20 te-wid">
                        <view class="top1 flex mt-30 te-wid">
                          <view class="flex fs0" v-if="item.recommends_show">
                            <view class="tip ft ft-20 flex-center mr-10 fs0"
                              v-for="(tag, index) in item.recommends_show" :key="index">
                              {{ tag }}
                            </view>
                          </view>
                          <view class="title  ft-lue ft ft-32 fw-800">
                            {{ item.name }}</view>
                        </view>
                        <view class="midel flex mt-10">
                          <text class="ft mr-10 c-99" v-for="(tag, index) in item.tags" :key="index">
                            <text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
                            <text v-else> {{ tag.name + " | " }}</text>
                          </text>
                        </view>
                        <view class="domn flex mt-20">
                          <view class="price pd-10">
                            <view class="ft">白菜价</view>
                            <text style="
															font-weight: 800;
															font-size: 20rpx;
															color: #333333;
															margin-top: 8rpx;
															">
                              {{ item.currency_symbol }}
                              <text style="
																font-family: 'DIN COROS';
																font-weight: 400;
																font-size: 28rpx;
																color: #333333;
																">
                                {{ item.bc_price_show }}</text>
                              {{ item.bc_price_unit }}</text>
                          </view>
                          <image class="wh-37" src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png">
                          </image>
                          <view class="price2 pd-10">
                            <view class="ft">同行价</view>
                            <text v-if="item.peer_price_show"
                              style="font-weight: 800; font-size: 20rpx; color: #999999">
                              {{ item.currency_symbol }}
                              <text style="
												  font-family: 'DIN COROS';
												  font-weight: 400;
												  font-size: 28rpx;
												  color: #999999;
												">
                                {{ item.peer_price_show }}</text>
                              {{ item.peer_price_unit }}</text>
                            <text v-else style="font-weight: 800; font-size: 20rpx; color: #999999">
                              {{ "暂无价格" }}
                            </text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="foot mt-20 flex-bwt">
                      <view class="arrow ml-12">
                        <text class="ft" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name
                        }}</text>
                        <text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
                      </view>
                      <view class="down flex mr-12">
                        <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
                        </image>
                        <text class="ft" style="margin-left: 8rpx" v-if="item.country_info">
                          {{ item.country_info.name }}</text>
                        <text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
                      </view>
                    </view>
                  </view>

                </view>



              </view>
              <view class="delete-btn bd-r20 ft-24 flex-center" :style="{ transform: `translateX(${item.offsetX}px)` }"
                @tap="deleteItem(item.id)" v-if="!isEdit">删除
              </view>
              <!-- </view> -->
            </view>
          </template>


          <view class="vedio flex-bwt-wrap pd-30" v-if="!isShowList && Object.keys(dataList).length > 0">
            <template v-for="video in dataList" :key="video.id">
              <view class="vedioItem" v-for="item in video.videos" :key="item.id"
                @tap.stop="goPage(`/pages/category/category?id=${item.id}&isReback=${true}`)">
                <image style="border-radius: 40rpx" class="wh-100" :src="item.cover" mode="aspectFill">
                </image>
                <image class="play wh-56" src="https://cdn.oss.bon-top.cn/static_bc/images/play.png"></image>
                <view class="card flex pd-12">
                  <view class="card_bg"></view>

                  <view class="avtor">
                    <image class="wh-56  bd-r50c" :src="item.sale_info?.avatar" mode="aspectFill"></image>
                    <image class="huiyuan" v-if="item.sale_info?.is_official"
                      src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
                  </view>
                  <view class="desc ml-12 te-wid">
                    <view class="ft1 te-1 c-ff">{{ video.name }}</view>
                    <view class="ft3"><span v-for="tag in video.tags.slice(0, 2)" :key="tag.id">{{ ' #' +
                      tag.name
                    }}</span>
                    </view>
                  </view>
                </view>
              </view>

            </template>
          </view>
        </comLoadMord>

        <view style="height: 100px;"></view>

      </view>

    </view>
    <!-- 筛选 -->

  </view>
  <!-- <u-modal :show="showModal" title="删除" cancelText="取消" content='确定要删除当前收藏的项目吗?' showCancelButton @confirm="confirm"
    @cancel="cancel"></u-modal> -->
  <dialogPop ref="diaLogPop" :show="showModal" title="删除" content='确定要删除当前收藏的项目吗?' @confirm='confirm' @cancel='cancel'>
  </dialogPop>

  <!-- </scroll-view> -->
  <comFilterPup ref="comFilter" v-if="show" :filterKeys="filterKeys" :datas="filterList" @getFiler="getFiler"
    @closeShow="closeShow" :type="pupTitle" :filterName='filterName'>
  </comFilterPup>
  <comTabBar :currentIndex="3"></comTabBar>

</template>

<script setup lang="js">
import { nextTick, onMounted, reactive, ref } from "vue";
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import { DataUtils } from '@/utils/Data.js'
import comFilterPup from '@/components/comFilterPup.vue'
import comLoadMord from "@/components/comLoadMord.vue";
import comTabBar from "@/components/comTabBar.vue";
import ComProjectList from "@/components/comProjectList.vue";
import comVedioList from "@/components/comVedioList.vue";
import dialogPop from '@/components/dialogPop.vue';
import { onLoad, onReady } from "@dcloudio/uni-app";


const selectId = ref(0)
const selectNum = ref(0)
let autoplay = ref(true)
let interval = ref(2500)
const show = ref(false);
let pageInfo = reactive({
  page: 1,
  pageSize: 10
})
const tableList = ref([
  { id: 1, name: '推荐' },
  { id: 1, name: '移民' },
  { id: 1, name: '教育' },
  { id: 1, name: '收藏' }
])
const tipList = ref([]);
const tipListSC = ref([
  { id: 1, name: '全部', key: '' },
  { id: 2, name: '移民项目', key: '移民' },
  { id: 3, name: '教育项目', key: '教育' },
  { id: 4, name: '附加服务', key: '附加服务' }
])
const list = ref([
  { id: 0, name: '咨询榜' },
  { id: 1, name: '收藏榜' },
  { id: 2, name: '查看榜' },

])
const currentIndex = ref(null);
const tab2Array = ref([
  {
    title: "综合推荐",
    key: 'overall_sort',
    array: ["综合推荐", "按点击量", "按播放量"],
  },
  {
    title: "国家",
    key: 'country',
    array: ["美国", "俄国", "法国"]
  },
  {
    title: "价格",
    key: 'price_sort',
    array: ["升序", "降序"]
  },
]);
const duration = ref(1000)

const topHeight = ref(0)
const top = ref(0)
const searchHeight = ref(0)
onReady(() => {
  const dpr = uni.getSystemInfoSync().pixelRatio
  nextTick(() => {
    // 获取顶部转态高度
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync()
    let statusBarHeight = systemInfo.statusBarHeight
    // + menuButtonInfo.height
    // topHeight.value = Number(menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
    topHeight.value = Number(menuButtonInfo.top + menuButtonInfo.height)
    topHeight.value = Math.round(topHeight.value * dpr) / dpr || 0
    top.value = statusBarHeight
    searchHeight.value = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight)
    console.log('高度', statusBarHeight, menuButtonInfo, topHeight.value)
  })
})

const offsetX = ref(0) // 滑动偏移量
const startX = ref(0)  // 触摸起始位置
const isMoving = ref(false)
const deleteWidth = ref(-80 - 20) // 删除按钮宽度(负数)按钮加边距
const selectItemId = ref(null)
// 触摸开始
const handleTouchStart = (e, item) => {
  startX.value = e.touches[0].clientX
  isMoving.value = true
  console.log('item', item)
  selectItemId.value = item.id
}
const getItem = () => {
  let _item = dataList.value.find(f => f.id == selectItemId.value)
  console.log('_item', _item)
  // let _find = _item.list.reduce((a, b) => {
  //   if (b.id == selectItemId.value) a = b
  //   return a
  // }, [])
  return _item
}
// 触摸移动
const handleTouchMove = (e) => {
  if (!isMoving.value) return
  let _find = getItem()

  // 滑动时 将其他的模块重置回0

  const currentX = e.touches[0].clientX
  const diffX = currentX - startX.value

  // 限制最大滑动距离
  if (diffX < deleteWidth.value) {
    offsetX.value = deleteWidth.value
    _find.offsetX = deleteWidth.value
  } else if (diffX > 0) {
    offsetX.value = 0
    _find.offsetX = 0

  } else {
    offsetX.value = diffX
    _find.offsetX = diffX

  }

}

// 触摸结束
const handleTouchEnd = () => {
  isMoving.value = false
  let _find = getItem()

  // 判断是否达到删除阈值
  if (offsetX.value < deleteWidth.value * 0.6) {
    offsetX.value = deleteWidth.value
    _find.offsetX = deleteWidth.value

  } else {
    offsetX.value = 0
    _find.offsetX = 0

  }
  // dataList.value.forEach(f => {
  // 	if (f.id != selectItemId.value) f.offsetX = 0
  // })
}

const confirm = () => {
  utils
    .request(
      api.cancelCollect, {
      product_id: productId.value,
    },
      "post"
    )
    .then((res) => {
      showModal.value = false
      dataList.value = []
      onTouchEnd()
      getProductListFun()
      uni.showToast({
        title: '删除成功!',
        duration: 2000
      })
    });
}
// 响应式数据
const itemHeight = ref(220)
const leftW = ref(0)
// 拖动事件处理
const onChange = (e, item) => {
  const x = e.detail.x
  if (x > 0) item.x = 0 // 禁止右滑
  leftW.value = x

}

// 触摸结束处理
const onTouchEnd = (item) => {
  dataList.value.forEach(f => {
    if (!item) { f.x = 0 }
    else if (f.id != item?.id) { f.x = 0 } else {
      setTimeout(() => {
        if (f.x < leftW.value) {
          f.x = 0
        } else
          f.x = -80
      }, 10)
    }
  })
}
const getAdList = (index) => {
  uni.navigateTo({ url: list1.value[index].url })
}
// 点击内容区域复位
const onContentClick = () => {
  list.forEach(item => item.x = 0)
}
const showModal = ref(false)
const productId = ref(0)
// 删除项目
const deleteItem = (id) => {
  productId.value = id
  showModal.value = true
  console.log('showModal', showModal.value)
}
// 取消
const cancel = () => {
  productId.value = 0
  showModal.value = false
  onTouchEnd()
}
const collectIndex = ref(1)
const collectName = ref('')
const collectFun = (item) => {
  collectIndex.value = item.id
  collectName.value = item.key
  dataList.value = []
  getProductListFun()
}
// 使用 reactive 创建响应式数组
const list1 = ref([]);
const getAdListData = () => {
  // if (token.length > 0) {
  utils
    .request(
      api.getAdList,
      {
        type: 1,
      },
      "get"
    )
    .then((res) => {
      list1.value = res.data;
    });
  // }

};

// 轮播
let SwpercurrentIndex = ref(0)
const changeSwiper = (e) => {
  SwpercurrentIndex.value = e.detail.current

}
// 推荐
// 专业老师
const SaleList = ref([])
const getSaleListFun = () => {
  utils.request(api.getSaleList
    , {}, 'get').then((res) => {
      if (res.code === 200) {

        SaleList.value = res.data.items

      }
    })
}
// 标签
const productTagLis = ref([])
const getProductTagListFun = () => {
  utils.request(api.getProductTagList
    , {}, 'get').then((res) => {
      if (res.code === 200) {

        productTagLis.value = res.data.items

      }
    })
}
//排行榜
const productPage = ref(1)
const productList = ref([])
const getProductData = () => {

  utils
    .request(
      api.getProductList, {
      page: productPage.value,
      pageSize: 4,
      orderBy: ['consult_num', 'collect_num', 'view_num'][selectNum.value],
      orderType: 'desc'
    },
      "post"
    )
    .then((res) => {
      if (res.data.items.length > 0) {
        productList.value = res.data.items
      }
    });
};
//精品服务
const productJPPage = ref(1)
const productJPList = ref([])
const getProductJPData = () => {

  utils
    .request(
      api.getProductList, {
      page: productJPPage.value,
      pageSize: 10,
      orderBy: 'view_num',
      cate_name: '附加服务',
      orderType: 'desc'
    },
      "post"
    )
    .then((res) => {
      if (res.data.items.length > 0) {
        productJPList.value = res.data.items
      }
    });
};



// 拿到子组件传过来的值 进行处理并搜索
// 列表名称对应传递的参数名称 key:value 列表名:参数名
const selectLabel = {
  'preferential': 'preferential_ids',
  'activity_tag': 'activity_tag_ids',
  'overall_sort': 'orderBy',
  'country': 'country_ids',
  'price_sort': 'orderType',
  'imm_identity_cate': 'imm_identity_cate',
  'imm_handle_cate': 'imm_handle_cate',
  'imm_handle_cycle': 'imm_handle_cycle',
  'imm_approved_time': 'imm_approved_time',
  'imm_live_require': 'imm_live_require',
  'imm_nocrime_require': 'imm_nocrime_require',
}

// 筛选点击确认时触发
let selectObj = reactive({})
const filterLength = ref(0)
const isFilter = ref(false)
const getFiler = (data, leng, isFilters) => {

  show.value = false;
  filterList = data

  isFilter.value = isFilters
  filterLength.value = Number(leng)
  Object.keys(selectLabel).forEach(f => {
    console.log(f)
    selectObj[selectLabel[f]] = data[f].ids
    tab2Array.value.forEach(tab => {
      tab.title = data[tab.key].ids.length > 0 ? data[tab.key].names[0] : data[tab.key].name
      tab.active = data[tab.key].ids.length > 0
    })
  })

  closeShow()
  // 请求数据
  dataList.value = []

  getProductListFun()

}
// 打开筛选弹窗
let filterListView = reactive([])
let filterKeys = ref([])
const comFilter = ref(null)
const filterName = ref('')
// 打开筛选
const openShow = (data, title, name = '') => {
  if (data.key) {
    filterKeys.value = [data.key]
    console.log('=====>', data, title)
  } else {
    // 'preferential', 'activity_tag',
    filterKeys.value = ['imm_identity_cate', 'imm_handle_cate', 'imm_handle_cycle', 'imm_approved_time', 'imm_live_require', 'imm_nocrime_require']
  }
  filterName.value = name
  show.value = true;
  comFilter?.value?.open()

};
const closeShow = () => {
  show.value = false;
}
// 列表
const isNoClick = ref(true)
let dataList = ref([])
const dataListObj = ref({})
const getProductListFun = async () => {
  uni.showLoading()
  let obj = {
    cate_name: tableList.value[selectId.value].name,
    ...pageInfo,
    ...selectObj
  }
  // 推荐和收藏
  if (selectId.value == 0 || selectId.value == 3) obj.cate_name = ''
  // 收藏
  if (getConllect.value && selectId.value == 3) obj.getConllect = getConllect.value
  // 收藏的筛选
  if (collectIndex && selectId.value == 3) obj.cate_name = collectName.value
  // 视频
  if (isGetVideo.value) obj.getVideo = 1
  console.log('isGetVideo.value', isGetVideo.value)
  // dataList.value = []
  await utils.request(api.getProductList
    , obj, 'post').then((res) => {
      if (!isNoClick.value) dataList.value = []
      if (res.code === 200) {
        dataListObj.value = res.data
        dataListObj.value.listIsShow = dataListObj.value.items.length > 0
        dataListObj.value.noDataType = 0
        uni.hideLoading()
        dataList.value = [...dataList.value, ...res.data.items]
        console.log(' dataList.value', dataList.value)
        isNoClick.value = true


      }
    })
}
const goPage = (url) => {
  uni.navigateTo({ url: url })
}
// 获取赛选列表数据
let info = reactive([])
let filterList = reactive({})
const getProductFilterData = () => {
  utils.request(api.getProductFilter
    , {

    }, 'get').then((res) => {
      if (res.code === 200) {
        info = res.data?.info
        tab2Array.value.forEach(item => {
          item.array = res.data?.info[item.key]
        })
        let labelObj = {
          'preferential': '活动优惠标签',
          'activity_tag': '活动标签',
          'overall_sort': '综合排序',
          'country': '洲/国家',
          'price_sort': '价格排序',
          'imm_identity_cate': '身份类别',
          'imm_handle_cate': '办理类别',
          'imm_handle_cycle': '办理周期',
          'imm_approved_time': '获批时间',
          'imm_live_require': '居住要求',
          'imm_nocrime_require': '无犯罪要求',
        }

        let keys = Object.keys(labelObj)
        let includes = ['overall_sort', 'price_sort',]
        for (let key of keys) {
          filterList[key] = {
            key: key,
            name: labelObj[key],
            isRadio: includes.includes(key) ? true : false,
            isArr: key.startsWith('imm_') ? true : false,
            list: info[key] || [],
            ids: [],
            names: [],
          }
          if (key == 'activity_tag' || key == 'preferential') {
            let arr = res.data.info[key]
            arr.forEach(f => f.key = key)
            tipList.value = [...tipList.value, ...arr]


          }
        }
        // 如果当前跳转页穿了筛选参数 则执行筛选的方法 否则就正常获取数据
        if (_options.value.keyName) getFilterListItem(_options.value.keyName)

        // getProductListFun()
      }
    })
}
// 获取城市的项 做筛选处理(用于其他页面跳转的本页面进行筛选的场景)
const getFilterListItem = (keyName) => {
  let _find = []
  for (let i = 0; i <= Object.keys(filterList['country'].list).length - 1; i++) {
    _find = filterList['country'].list[i].children.filter((item) => item.name.includes(keyName))
    if (_find.length > 0) break
  }
  console.log('_find', _find)
  if (_find) {
    filterList['country'].ids = [_find[0].id]
    filterList['country'].names = [_find[0].name]
  }
  getFiler(filterList, filterLength.value)

  return _find
}
const showBg = ref(false)
// 默认按列表展示
const isShowList = ref(true)
const showListTitle = ref('按视频查看')
const isGetVideo = ref(false)
const changeShowList = () => {
  isShowList.value = !isShowList.value
  isGetVideo.value = !isShowList.value
  dataList.value = []
  if (isShowList.value) {
    showListTitle.value = '按视频查看'
  } else {
    showListTitle.value = '按列表查看'
  }
  getProductListFun()
}

const selectActivity = (item) => {
  if (!filterList[item.key].ids.includes(item.id)) {
    filterList[item.key].ids.push(item.id)
    filterList[item.key].names.push(item.name)
  } else {
    filterList[item.key].ids = filterList[item.key].ids.filter(f => f != item.id)
    filterList[item.key].names = filterList[item.key].names.filter(f => f != item.name)
  }
  // dataList.value = []
  isNoClick.value = false
  getFiler(filterList, filterLength.value)
}
const selectTab = (id) => {

  selectNum.value = id
  getProductData()
}


const scroll = () => {

}


const getConllect = ref(0)
const selectBtn = async (idx) => {
  getConllect.value = 0
  collectIndex.value = 1
  collectName.value = ''
  selectId.value = idx
  dataList.value = []

  pageInfo = {
    page: 1,
    pageSize: 10
  }
  if (idx == 0 && idx != 3) await init()
  if (idx == 3) {
    getConllect.value = 1
    await init()
  }
  await getProductListFun()

}
const init = () => {
  getSaleListFun()
  getProductTagListFun()
  getProductData()
  getProductJPData()
  getAdListData()
  getProductListFun()
}
onMounted(() => {
  // init()
})
const _options = ref({})
onLoad(options => {
  console.log('options====>', options)
  getProductFilterData()
  init()
  if (options.cate_name) {
    console.log('不不不', tableList.value.findIndex(f => f.name == options.cate_name))
    selectId.value = tableList.value.findIndex(f => f.name == options.cate_name)

    if (options.country_name !== '') {

      //如果传过来的值为筛选类型 则处理筛选数据 filterList
      // 获取筛选的数据id 回显到filterList =》 ids中

      _options.value.keyName = options.country_name

    }
    selectBtn(selectId.value)
  }
})
</script>

<style lang="scss" scoped>
.auto {
  margin: 0 auto;
}

.swiper {
  height: 100%;
}

.indicator {
  height: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .dian {
    width: 10rpx;
    height: 10rpx;
    background-color: #D1D1D1;
    border-radius: 50%;
    margin: 5rpx;
  }

  .active {
    width: 30rpx;
    height: 10rpx;
    background-color: #333333;
    border-radius: 4rpx;
    transition: 0.1s;

  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // height: 100vh;
  width: 100%;


  .top {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 750rpx;
    // height: 440rpx;
    background: #fff;
    // background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/ac_bg.png");
    background-size: 100% 100%;

    // background-color: red;
    .top_search_box {
      //   background: #fff;
      background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/ac_bg.png");
      background-size: 100% 100%;
      padding: 0 30rpx;
      height: 88rpx;
    }

    .search {
      width: 382rpx;
      height: 64rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #333333;
    }
  }

  .btn {
    width: 650rpx;
    height: 74rpx;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 100%);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
  }

  .tabBar {
    // background-color: #fff;
    padding: 0 30rpx;
    height: 74rpx;
    // background-color: red;

    .item {
      width: 158rpx;
      height: 72rpx;
      background: #f8f8f8;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .active {
      background: #dbf046;
    }
  }

  .vedio {
    padding: 0 30rpx;

    .vedioItem {
      width: 334rpx;
      height: 614rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      //border: 1rpx solid red;
      margin-bottom: 16rpx;
      position: relative;

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }

      .play {
        position: absolute;
        top: 297rpx;
        left: 147rpx;
        z-index: 3;
      }

      .card {
        width: 314rpx;
        height: 82rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        position: absolute;
        bottom: 10rpx;
        left: 10rpx;
        z-index: 10;
        overflow: hidden;

        .card_bg {
          width: 314rpx;
          height: 82rpx;
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.6);

          backdrop-filter: blur(30rpx);

        }

        .avtor {
          width: 56rpx;
          height: 56rpx;
        }

        .huiyuan {
          width: 22rpx;
          height: 20rpx;
          position: absolute;
          bottom: 10rpx;
          left: 44rpx;
          z-index: 12;
        }
      }
    }
  }

  .confirm {
    width: 750rpx;
    height: 118rpx;
    background: #f8f8f8;
    box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

    .submit {
      width: 482rpx;
      height: 78rpx;
      background: #333333;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .reset {
      width: 168rpx;
      height: 78rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }

  .popup {
    height: 920rpx;
    // border: 2rpx solid red;
    box-sizing: border-box;
    padding: 40rpx;

    .service {
      height: 58rpx;
      background: #f1f1f1;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      margin-left: 20rpx;
      margin-top: 20rpx;
    }

    .active {
      background: #333333;
      color: #dbf046;
    }

  }

  .imglist {
    width: 216rpx;
    height: 148rpx;
    // background: #BB97FF;
    border-radius: 40rpx 80rpx 40rpx 40rpx;
    // padding: 10rpx;
    box-sizing: border-box;
  }

  .imgBox {
    width: 690rpx;
    height: 220rpx;
    margin: 0 auto;
  }

  .teacher {
    width: 690rpx;
    height: 372rpx;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    margin: 0 auto;

    .desc {
      padding-left: 10rpx;
      box-sizing: border-box;
    }

    .title {
      // width: 314rpx;
      height: 44rpx;
      position: relative;

      .title_text {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        z-index: 1;
      }

      .title_bg {
        position: absolute;
        top: 6rpx;
        left: 0rpx;
        opacity: 0.6;
        height: 44rpx;
        font-size: 44rpx;
        // line-height: 44rpx;
        // background: #dd524d;

      }
    }

    .scroll-view {
      white-space: nowrap;
      width: 100%;
    }

    .consultant {
      display: inline-block;
      width: 294rpx;
      height: 198rpx;
      background: #ffffff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      box-sizing: border-box;
      // background-color: red;

      .title {
        // background-color: beige;
        height: 92rpx;
      }

      .avtor {
        width: 88rpx;
        height: 88rpx;
        background: #f8f8f8;
        border: 2rpx solid #dbf046;
        border-radius: 50%;
      }

      .detail {
        //width: 88rpx;
        height: 54rpx;
        background: #333333;
        color: #dbf046;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
  }

  .ranking_box {
    background: #fff;
    padding: 30rpx 30rpx 0;

  }

  .ranking {
    width: 100%;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    overflow: hidden;


    .head {

      background: linear-gradient(180deg, #dbf046 0%, #ffee7e 100%);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      border: 10rpx solid #f8f8f8;
      box-sizing: border-box;
      position: relative;


      .title {
        position: relative;
        box-sizing: border-box;


        .left {
          flex: 1;
          height: 44rpx;
          // line-height: 40rpx;

          .wen {
            position: absolute;
            z-index: 3;
          }
        }

        .title_name {
          left: 4rpx;

        }

        .title_bg {
          position: absolute;
          left: 0;
          top: 6rpx;
          opacity: 0.6;
          font-size: 44rpx;
          // line-height: 44rpx;
          height: 44rpx;
          width: 100%;
        }

        .right {}
      }

      .tab {
        height: 74rpx;
        background: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-top: 16rpx;

        .tabItem {
          width: 210rpx;
          height: 54rpx;
          background: #ffffff;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          position: relative;

          .imag {
            width: 100%;
            height: 72rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
          }

          .tabItem_text {
            position: relative;

          }
        }

        .active {
          color: #ffffff;

        }
      }



      .showMore {}
    }

    .card_box {
      padding: 0 20rpx 20rpx;
      // background: green;

    }
  }

  .cardList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .card {
      width: 314rpx;
      height: 196rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .pic {
        width: 98rpx;
        height: 118rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        position: relative;

        .img {
          position: absolute;
          top: -10rpx;
          left: 0;
          z-index: 2;

        }
      }

      .kid {
        width: 186rpx;
        height: 48rpx;
        background: linear-gradient(90deg,
            #fff5f3 0%,
            rgba(255, 245, 243, 0) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .location {
        width: 294rpx;
        height: 48rpx;
        background: linear-gradient(90deg, #f8f8f8 0%, #ffffff 100%);
        border-radius: 22rpx 22rpx 22rpx 22rpx;
      }
    }
  }

  .twoCard {
    .all {
      width: 290rpx;
      height: 74rpx;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
      border-radius: 0rpx 0rpx 40rpx 40rpx;
    }

    .card_1 {
      width: 334rpx;
      height: 400rpx;
      background: linear-gradient(180deg, #fff3ec 0%, #f8f8f8 100%);
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .title {
        // width: 314rpx;
        height: 44rpx;

        .title_box {
          position: relative;
          height: 40rpx;

        }

        .title_name {
          position: absolute;
          top: 0rpx;
          left: 8rpx;
          z-index: 1;

        }

        .title_bg {
          position: absolute;
          left: 0;
          top: 6rpx;
          opacity: 0.6;
        }

      }

      .card_slo {
        width: 290rpx;
        height: 196rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .address {
          .imgs_icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 3rpx;
          }
        }

        .item {
          width: 100%;

          .item_model {
            .imgs {
              width: 98rpx;
              height: 118rpx;
            }

            .money {

              background: linear-gradient(to right, #FFF5F3, #fff5f300);
            }
          }
        }
      }
    }

    .card_2 {
      width: 330rpx;
      height: 400rpx;
      background: linear-gradient(180deg, #f2f2ff 0%, #f8f8f8 100%);
      background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/tip_bg.png');
      background-size: 100% 100%;

      .title {
        // width: 314rpx;
        height: 44rpx;
        position: relative;
        // background-color: #000;

        .wen {
          position: absolute;
          top: 0rpx;
          left: 0rpx;
          z-index: 18;
        }

        .wen_bg {
          // margin-top: 6rpx;
          position: absolute;
          top: 6rpx;
          left: 0;
          z-index: 0;
          opacity: 0.6;
        }
      }

      .tipList {
        width: 290rpx;
        height: 52rpx;
        background: #FFFFFF;
        border-radius: 40rpx 80rpx 40rpx 40rpx;
      }
    }
  }

  .box100 {
    width: 100%;
  }

  .nextCard {
    // width: 700rpx !important;
    width: 100%;
    // background-color: red;
    // position: relative;
    // background-color: red;
    // overflow: hidden;
    box-sizing: border-box;
    // height: calc(100vh - 520rpx);

    .bg {
      width: 100%;
      height: 100%;
      background: #000;
      // opacity: 0.1;
      position: absolute;
      top: 120rpx;
      z-index: 2;
      border-radius: 40rpx;

    }

    .menu_box {
      height: 170rpx;

      .menu_box_list {

        .active {
          color: #333333;
          font-weight: 900;
        }

        // position: relative;
        .tipItemActive {
          color: rgb(250, 92, 35);
        }

        .tipBox_list_model {
          background-color: gold;
          // position: absolute;
          left: 0;
          width: 100%;
          z-index: 3;
          border-radius: 40rpx;



          .tipBox_list {
            width: 100%;
            height: 200rpx;
            // position: absolute;
            background-color: #fff;
            top: 0rpx;
            z-index: 3;
            border-radius: 40rpx;
            padding: 20rpx 30rpx 0 30rpx;
            // margin-top: 10rpx;

            .tipItem {
              width: 100%;
              border-top: 2rpx solid #f1f1f1;
              padding: 10rpx 0;
              margin-left: 30rpx;
              color: #666;
            }



            .tipItem:first-child {
              border: none;

            }
          }
        }
      }
    }

    .jiantou {
      width: 30rpx;
      height: 18rpx;
    }

    .imgdeg {
      transform: rotate(180deg);
    }

    .tabTwo {
      width: 690rpx;
      height: 74rpx;
      background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;


      // .tipBox_list {
      //   width: 100%;
      //   height: 200rpx;
      //   background-color: red;
      //   // position: absolute;
      // }

      .left {
        .item {
          // margin-right: 24rpx;
          // border-right: #ccc 4rpx solid;
          // padding-right: 8rpx;
          // position: relative;
          display: flex;
          align-items: center;

        }

        .item:last-child {
          border: none;
        }

        // .tipBox {
        //   width: 100vm;
        //   height: 218rpx;
        //   z-index: 99;
        //   //border: 2rpx solid red;
        //   position: absolute;
        //   left: -20rpx;

        //   .tipList {
        //     position: absolute;
        //     top: 32rpx;
        //     left: 0;
        //     text-align: center;
        //     line-height: 60rpx;
        //   }
        // }
      }
    }

    .qiehuan {
      // border: 2rpx solid red;
      width: 198rpx;
      height: 54rpx;
      background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .cardList {
      .absu {
        position: absolute;
        top: 30rpx;
        right: 0rpx;
        opacity: 0.3;

        .iamg {
          width: 155rpx;
          height: 138rpx;
        }
      }

      // width: 50%;
      .card {

        // width: 690rpx;
        width: 100%;
        height: 408rpx;
        background: #ffffff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #f1f1f1;
        position: relative;

        .left {
          width: 222rpx;
          height: 274rpx;
          border-radius: 40rpx 40rpx 40rpx 40rpx;
          flex-shrink: 0;
        }

        .right {
          flex: 1;
          height: 274rpx;

          .active {
            color: #333333;
            font-weight: 900;
          }


          .top1 {

            .tip {
              // width: 88rpx;
              height: 36rpx;
              display: inline-block;
              line-height: 36rpx;
              box-sizing: border-box;
              background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              flex-shrink: 0;
              padding: 5rpx 8rpx;
            }

          }

          .domn {
            .price {
              width: 148rpx;
              height: 92rpx;
              background: linear-gradient(90deg,
                  #fff5f3 0%,
                  rgba(255, 245, 243, 0) 100%);
              border-radius: 20rpx 20rpx 20rpx 20rpx;
            }

            .price2 {
              width: 148rpx;
              height: 92rpx;
              background: #fff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              margin-left: 30rpx;
            }
          }

          .midel {}
        }

        .foot {
          width: 100%;
          height: 74rpx;
          background: linear-gradient(92deg,
              #f8f8f8 0%,
              rgba(248, 248, 248, 0) 100%);
          border-radius: 40rpx 40rpx 40rpx 40rpx;
        }
      }
    }

    .scroll-view_H {

      margin-top: 24rpx;
      white-space: nowrap;
      padding: 0 30rpx;
      box-sizing: border-box;

    }

    .scroll-view-item_A {
      //border: 2rpx solid green;
      display: inline-block;
      height: 58rpx;
      background: #ffffff;
      border-radius: 34rpx 34rpx 34rpx 34rpx;
      border: 2rpx solid #f1f1f1;
      margin-right: 20rpx;
      line-height: 58rpx;
      text-align: center;
      padding-left: 20rpx;
      padding-right: 20rpx;
      // margin-left: 24rpx;

    }

    .scroll-view-item_A_active {
      margin-left: 24rpx;
      background: #000;
      color: #f1f1f1;
    }
  }


}

.jiantou {
  width: 30rpx;
  height: 18rpx;
}

.menu_box {
  width: 100%;
  height: 140rpx;
  // position: fixed;
  // background-color: red;
  z-index: 3;
  left: 0;
  background-color: #fff;
  box-sizing: border-box;

  .scroll-view_H {

    margin-top: 10rpx;
    white-space: nowrap;
    // background-color: red;

  }

  .scroll-view-item_A {
    //border: 2rpx solid green;
    display: inline-block;
    height: 58rpx;
    background: #ffffff;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    border: 2rpx solid #f1f1f1;
    margin-right: 20rpx;
    line-height: 58rpx;
    text-align: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    margin-left: 24rpx;

  }

  .scroll-view-item_A_active {
    margin-left: 24rpx;
    background: #000;
    color: #f1f1f1;
  }

  .menu_box_list {
    height: 74rpx;
    line-height: 74rpx;
    background: linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%);
    margin: 0 30rpx;
    border-radius: 20rpx;

    // background-color: red;
    .active {
      color: #333333;
      font-weight: 900;
    }

    // position: relative;
    .tipItemActive {
      color: rgb(250, 92, 35);
    }

    .tipBox_list_model {
      background-color: gold;
      // position: absolute;
      left: 0;
      width: 100%;
      z-index: 3;
      border-radius: 40rpx;



      .tipBox_list {
        width: 100%;
        height: 200rpx;
        // position: absolute;
        background-color: #fff;
        top: 0rpx;
        z-index: 3;
        border-radius: 40rpx;
        padding: 20rpx 30rpx 0 30rpx;
        // margin-top: 10rpx;

        .tipItem {
          width: 100%;
          border-top: 2rpx solid #f1f1f1;
          padding: 10rpx 0;
          margin-left: 30rpx;
          color: #666;
        }



        .tipItem:first-child {
          border: none;

        }
      }
    }
  }
}


.movable-area {
  width: 100%;
  margin-bottom: 20rpx;
  position: relative;
  // background-color: red;
}

.movable-view {
  width: calc(100% + 160rpx);
  /* 内容+删除按钮总宽度 */
  height: 100%;
  display: flex;
  box-sizing: border-box;
}

.contentxx {
  width: calc(100% - 160rpx);
  /* 占可视区域宽度 */
  background: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.delete-btn {
  width: 160rpx;
  /* 与deleteBtnWidth对应 */
  background: #dd524d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardList_box {
  position: relative;
  width: 100%;
  margin: 20rpx 0;
  overflow: hidden;
  box-sizing: border-box;

  &_item {
    width: 100%;
    position: relative;
    transition: transform 0.3s ease;
    z-index: 2;
    // background-color: #fff;
    flex-shrink: 0;
    padding: 0 30rpx;
    box-sizing: border-box;


  }

  .delete-btn {
    width: 160rpx;
    height: auto;
    background-color: #FFF3EC;
    color: #9C0000;
    flex-shrink: 0;
    text-align: center;
    transition: transform 0.3s ease;
    align-self: stretch;
    margin-right: 20rpx;


    text {
      font-size: 28rpx;
    }
  }
}


// 弹窗样式修改
::v-deep .u-fade-enter-active {
  // background-color: rgba(0,0,0,0.4) !important;
}

::v-deep .u-popup__content {
  border-radius: 40rpx !important;
}

::v-deep .u-modal {
  width: 518rpx !important;
}

::v-deep .u-modal__title {
  font-weight: 800 !important;
  font-size: 32rpx !important;
  color: #333333 !important;
  text-align: center;
  padding-top: 30rpx !important;
}

::v-deep .u-modal__content {
  height: 160rpx !important;
  padding: 20rpx 30rpx 0rpx !important;
}

::v-deep .u-modal__content__text {
  font-size: 28rpx !important;
  color: #666666 !important;
}

::v-deep .u-line {
  display: none !important;
}

::v-deep .u-modal__button-group {
  padding-bottom: 30rpx;
}

::v-deep .u-modal__button-group__wrapper--cancel {
  width: 184rpx;
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 20rpx;
  flex: unset !important;
  margin-left: 60rpx;
  margin-right: 30rpx;
  color: #333333 !important;
}

::v-deep .u-modal__button-group__wrapper--confirm {
  width: 184rpx;
  height: 80rpx;
  background: #333333;
  border-radius: 20rpx;
  flex: unset !important;
}

::v-deep .u-modal__button-group__wrapper__text {
  font-size: 28rpx !important;
}

::v-deep .u-modal__button-group__wrapper--cancel .u-modal__button-group__wrapper__text {
  color: #333333 !important;
}

::v-deep .u-modal__button-group__wrapper--confirm .u-modal__button-group__wrapper__text {
  color: #DBF046 !important;
}
</style>
